<template>
	<view class="p-3 flex align-start border-bottom border-light-secondary">
		<free-avater :src="item.avatar" size="80"></free-avater>
		<view class="pl-1 flex-1 flex flex-column">
			<!-- 昵称 -->
			<text class="font-md text-hover-primary mb-1">{{item.username}}</text>
			<!-- 内容 -->
			<text class="font-md text-dark mb-1">{{item.context}}</text>
			<!-- 图片 -->
			<view v-if="item.image.length" class="py-2 flex flex-wrap">
				<!-- 单图 -->
				<block v-for="(image, imageIndex) in item.image" :key="imageIndex">
					<free-image v-if="item.image.length === 1" :src="image.src" imageClass="rounded bg-secondary"
						@click="preview(image.src)"></free-image>
					<!-- 多图 -->
					<image v-else :src="image.src" @click="preview(image.src)" mode="aspectFill"
						style="width:180rpx;height: 180rpx;" class="rounded bg-secondary mr-2 mb-2"></image>
				</block>
			</view>
			<!-- 视频 -->
			<view v-if="item.video" class="py-2">
				<video id="myVideo" :src="item.video.src" :poster="item.video.poster" controls style="height: 300rpx;width: 500rpx;"></video>
			</view>
			<!-- 时间和操作 -->
			<view class="flex align-center justify-between">
				<text class="font-sm text-light-muted">{{item.create_time | formatTime}}</text>
				<view class="rounded p-1 bg-light" @click="$emit('action',{item,index})">
					<text class="text-hover-primary iconfont font">&#xe62a</text>
				</view>
			</view>
			<!-- 点赞列表|评论列表 -->
			<view class="bg-light mt-2" v-if="item.supports.length || item.comments.length">
				<!-- 点赞 -->
				<view v-if="item.supports.length" class="border-bottom flex align-start p-2">
					<text class="flex-shrink iconfont font text-hover-primary">&#xe637;</text>
					<view class="flex flex-1 flex-wrap ml-1">
						<text v-for="(s,si) in item.supports" :key="si" class="font text-hover-primary ml-1">{{s.username}}</text>
					</view>
				</view>
				<!-- 评论 -->
				<view v-if="item.comments.length" class="flex align-start p-2">
					<!-- <text class="flex-shrink iconfont font text-hover-primary">&#xe64e;</text> -->
					<view class="flex flex-column flex-1">
						<view class="flex" v-for="(c,ci) in item.comments" :key="ci">
							<text class="text-hover-primary font">{{c.username}}:</text>
							<text class="font text-dark flex-1">{{c.content}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeAvater from "@/components/free-ui/free-avater.vue";
	import freeImage from "@/components/free-ui/free-image.vue";
	import $T from "@/common/free-lib/time.js"
	export default {
		components: {
			freeAvater,
			freeImage
		},
		props: {
			item: Object,
			index: Number
		},
		// 时间转换、过滤器
		filters: {
			formatTime(value) {
				return $T.gettime(value)
			}
		},
		// 数组里面是对象，必须这样子写才拿到图片
		computed: {
			urls() {
				return this.item.image.map(item => item.src)
			}
		},
		

		methods: {
			// 查看大图
			preview(src) {
				uni.previewImage({
					current: src,
					urls: this.urls
				})
			},
			//页面准备好时创建video
			onReady: function(res) {
				this.videoContext = uni.createVideoContext('myVideo')
			},
		}
	}
</script>

<style>
</style>
